<template>
  <van-dialog
    :show="show"
    :title="lang.dialog_title"
    destroyOnClose
    teleport="body"
    className="custom-dialog"
    :showConfirmButton="false"
    :showCancelButton="true"
    @cancel="beforeClose"
  >
    <div class="warpbox">
      <p class="title">{{ lang.congratulations }}</p>
      <div class="img-box">
        <NuxtImg src="/images/activity/daily-checkin/icon-coin1.png" alt="" />
        <div>
          <span>5.36{{ userStore.moneyUnit }}</span>
        </div>
      </div>
      <div class="content">
        <div class="text">{{ lang.load_any_amount }} <span>(0/1)</span></div>
        <div class="bottom">
          <div class="img_box">
            <div v-for="(reward, index) in rewards" :key="index">
              <NuxtImg
                :class="reward.iconClass"
                :src="reward.iconSrc"
                alt=""
                width="30"
                height="30"
              />
              {{ reward.amount }}
            </div>
          </div>
          <div class="btn" v-click-move @click="handleDeposit">
            {{ lang.deposit_btn }}
          </div>
        </div>
      </div>
      <div class="btnBox" v-click-move @click="handleRedeem">
        {{ lang.redeem_btn }}
      </div>
    </div>
  </van-dialog>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/daily-checkin");
const userStore = useUserStore();

defineProps(["show"]);
const emit = defineEmits(["change"]);

const rewards = ref([
  {
    iconClass: "xz",
    iconSrc: "/images/activity/daily-checkin/box-g.png",
    amount: "2",
  },
  {
    iconClass: "xz",
    iconSrc: "/images/activity/daily-checkin/icon-coin3.png",
    amount: "1.5",
  },
]);

const beforeClose = () => {
  emit("change", false);
};

const handleDeposit = () => {
  beforeClose();
  userStore.changeShowCarteira(true);
};

const handleRedeem = async () => {
  beforeClose();
  navigateTo({ name: "activity-resgatar" });
};
</script>

<style scoped lang="scss">
.warpbox {
  width: 100%;
  padding: 0.6rem 0.4rem 0;
  color: var(--theme-neutral1);
  padding-bottom: 0.5rem;

  .title {
    font-size: 0.38rem;
    text-align: center;
  }

  .img-box {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 1.8rem;
      margin-bottom: 0.4rem;
    }

    div {
      width: 4.2rem;
      height: 1.2rem;
      background: var(--theme-color9);
      border-radius: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--theme-dec4);

      span {
        font-size: 0.6rem;
      }
    }
  }

  .content {
    margin-top: 0.5rem;
    min-height: 2rem;
    background: var(--theme-color3);
    border-radius: 0.2rem;
    padding: 0.3rem;
    box-sizing: border-box;

    .text {
      font-size: 0.34rem;

      span {
        color: var(--theme-dec4);
      }
    }

    .bottom {
      margin-top: 0.15rem;
      height: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .img_box {
        display: flex;
        align-items: center;
        font-size: 0.34rem;

        div {
          display: flex;
          align-items: center;

          &:nth-of-type(1) {
            margin-right: 0.5rem;
          }

          img {
            width: 0.75rem;
            height: 0.75rem;
            margin-right: 0.2rem;
          }
        }
      }

      .btn {
        padding: 0 0.5rem;
        height: 0.6rem;
        height: 100%;
        background: var(--theme-color10);
        border-radius: 2rem;
        font-size: 0.34rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .btnBox {
    margin: 0.6rem auto 0;
    width: 4.2rem;
    height: 1.2rem;
    background: var(--theme-dec4);
    border-radius: 2rem;
    color: var(--theme-dec3);
    font-size: 0.54rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
